<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useBuildAllList } from '../../../hooks/lq_index';
import addForm from './addForm.vue'
import { getBuildingListApi , delBuildingApi } from '../../../api/floor'
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatDate } from "@/utils/";
// import { ElMessage } from 'element-plus';
// ==================
const buildList = useBuildAllList()
// console.log(buildList);
// =====================
// 列表功能
const queryData = reactive({
  current: 1,
  pageSize: 10,
  create_time: '',
  name: '',
  community_code: ''
})
const total = ref(0)
const list = ref([])
const initData = async () => {
  let { data } = await getBuildingListApi(queryData)
  console.log(data);
  list.value = data.rows
  total.value = data.count
}
onMounted(() => {
  initData()
})


// 处理时间
const timeArr = ref([]);
watch(timeArr, (val) => {
  console.log(timeArr.value);
  if (timeArr.value) {
    queryData.create_time = val
      .map((item) => {
        item = +new Date(item);
        return item;
      })
      .join(",");
    console.log(queryData.create_time);
  } else {
    queryData.create_time = "";
  }
});
// 每页数量切换
const sizeChange = (val) => {
  queryData.current = val
  initData()
}
// 页码切换
const currentChange = (val) => {
  queryData.pageSize = val
  initData()
}
// 搜索确定
const onSearch = () => {
  queryData.current = 1
  initData()
}
// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    create_time: '',
    name: '',

  })
  initData()
}
// ===================修改功能
const editRow = id => {
  addRef.value.replyData(id)
}

// 删除功能
const delRow = async (id) => {
 await  ElMessageBox.confirm(
    '确定要删除吗',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
   await delBuildingApi(id)
    ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--

  initData()
}
// ============新增功能================
const addRef = ref()
</script>
<template>
  <div class="app-container">
    <span style="font-weight: 700;">楼栋管理</span> <span>用于展示小区里每一栋的基础信息</span>
    <hr>
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="80px" label-position="top" :inline="true">
        <el-form-item label="小区名称">
          <el-select clearable v-model="queryData.community_code" placeholder="请选择">
            <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栋数名称">
          <el-input clearable v-model="queryData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker clearable v-model="timeArr"  type="daterange" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="display: flex;align-items:end">
          <div></div>
          <div>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <hr>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true">新增楼栋</el-button>
          <el-icon style="margin-left: 10px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-left: 10px;">
            <Share />
          </el-icon>
          <el-icon style="margin-left: 10px;">
            <Setting />
          </el-icon>
        </div>
      </el-row>
      <hr>
      <!-- 表格区域 -->
      <el-table :data="list" border stripe>
        <el-table-column prop="code" width="320px" label="栋数编号"></el-table-column>
        <el-table-column prop="community.name" label="小区名称"></el-table-column>
        <el-table-column prop="name" label="栋数名称"></el-table-column>
        <el-table-column prop="lift" label="电梯数"></el-table-column>
        <el-table-column prop="create_time" label="创建时间">
           <template #default="{ row }">
              {{ formatDate(row.create_time) || "-" }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" size="default" @click="editRow(row.id)">编辑</el-button>
            <el-button type="text" size="default" @click="delRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="currentChange" @current-change="sizeChange" v-model:current-page="queryData.current"
        :page-sizes="[10, 20, 30, 40]" v-model:page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
  </div>
</template>
<style scoped></style>